<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        // 模板字符串(template string)是增强版的字符串，用反引号`标识
        let str="字符串1";
        let str2='字符串2';
        let str3=`字符串3`;
        console.log(typeof str);
        console.log(typeof str2);
        console.log(typeof str3);
        let str4="<p>p01</p>"+
                 "<p>p02</p>"+
                 "<p>p03</p>";
        console.log(str4);

        // 模板字符串，允许字符串结构换行定义(保留编码格式)
        let str5=`
            <p>p01</p>
            <p>p02</p>
            <p>p03</p>
            <p>p04</p>
            <p>p05</p>
        
        `;
        console.log(str5);

        //在模板字符串中可以通过语法直接在模板中调用变量:${变量名|对象的变量|全局函数|自定义函数|简单表达式}
        let arr=["方协文","庄国栋","黄振华","周一"];
        let u={username:{first:"刘",last:"亦菲"}};

        let str6="<p>"+arr[0]+"</p>"+
                 "<p>"+arr[1]+"</p>"+
                 "<p>"+arr[2]+"</p>"+
                 "<p>"+u.username.last+"</p>";
        console.log(str4);
        let strs=`
            <li>${arr[0]}</li>
            <li>${arr[1]}</li>
            <li>${arr[2]}</li>
            <li>${arr[3]}</li>
            <li>${u.username.last}</li>

        `;
        console.log(strs);




        //定义一个模板字符串，字符串中是多个div
        // 任意定义一个数组，取数组中的最后一个元素值
        // 取Math对象中的PI的值
        // 任意定义一个函数，有返回值，取该函数的返回值
        // 调用Math对象的pow的方法，计算3的5次方的值
        //尝试用一个三目运算符，比如100和89比，如果100比89大，取yes，否则取no
        // 最后将这个字符串中的div写入到页面中去
        let arrs=["aa","bb","cc","dd","ee"];
        function show(){
            return "嘻嘻嘻";
        }
        let strs2=`
            <div>${arrs[arrs.length-1]}</div>
            <div>${Math.PI}</div>
            <div>${show()}</div>
            <div>${Math.pow(3,5)}</div>
            <div>${100>89?"yes":"no"}</div>
        `;

        window.onload=function(){
            let mydiv=document.getElementById("mydiv");
            mydiv.innerHTML=strs2;
        };
       
    </script>
</head>
<body>
    <div id="mydiv"></div>
 
</body>
</html>